<template>
  <div class="main" v-if="film">
    <div class="page_deta">
      <img src="@/assets/goBack.png" alt="" class="goBack" @click="Back">
      <img :src="film.poster" alt="" class="post" />
    </div>

    <div class="info">
      <div class="film-detail">
        <h2>{{ film.name }}</h2>
        <span>{{ film.category }}</span>
        <span style="width: 110px">{{ getTime }} 上映</span>
        <span>{{ film.nation }} | {{ film.runtime }}分钟</span>
        <div class="film-synopsis">{{ film.synopsis }}</div>
      </div>
    </div>

    <div class="actors">
      <h4>演职人员</h4>
      <ul>
        <li v-for="item in film.actors">
          <img :src="item.avatarAddress" alt="" />
          <div class="actors-role">
            <span>{{ item.name }}</span>
            <span>{{ item.role }}</span>
          </div>
        </li>
      </ul>
    </div>

    <div class="photos">
      <h4>剧照</h4>
      <ul>
        <img v-for="item in film.photos" :src="item" alt="" />
      </ul>
    </div>
  </div>
  <div class="goSchedule" @click="gofilmsD1cinemas">选座购票</div>
</template>

<style lang="scss" scoped>
.page_deta {
  height: 200px;
}

.post {
  display: block;
  width: 360px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-52%, -135%);
  overflow: hidden;
}

.main {
  height: 94%;
  background-color: #f4f4f4;
  overflow-x: hidden;
}

.info,
.actors,
.photos {
  background: white;
}

.goBack {
  width: 30px !important;
  position: absolute;
  padding: 5px;
}

.film-detail {
  height: 163px;
  padding: 20px;
  // margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 13px;
  color: #797d82;
  overflow: hidden;
}

.film-synopsis {
  width: 316px;
  height: 38px;
  overflow: hidden;
  line-height: 20px;
}

.actors-role {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  width: 85px;
}

ul {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  // flex-direction: column;
  overflow-x: auto;
}

li {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

li img {
  display: block;
  width: 85px;
  height: 85px;
}

.actors {
  padding: 10px;
  margin: 10px 0;
}

span {
  font-size: 12px;
  color: #797d82;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actors span {
  width: 60px;
  text-align: center;
}

h4 {
  font-size: 16px;
  text-align: left;
  color: #191a1b;
  font-weight: 400;
  margin-left: 10px;
}

h2 {
  font-weight: 500;
  color: #191a1b;
}

.photos {
  padding: 10px;
  margin-bottom: 13px;
}

.photos img {
  width: 150px;
  height: 100px;
  margin: 10px;
}

.goSchedule {
  height: 7%;
  background-color: #ff5f16;
  color: #fff;
  font-size: 16px;
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<script setup>
import { getDetail, parseTimestamp } from "@/api/mm";
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router"

const route = useRoute()
const router = useRouter()
const film = ref(null);

onMounted(() => {
  fetchData()
})

const filmId = computed(() => {
  return route.params.id;
})

const getTime = computed(() => {
  return parseTimestamp(film.value.premiereAt, "YYYY-MM-DD")
})

const fetchData = async () => {
  film.value = (
    await getDetail({
      filmId: filmId.value,
    })
  ).data.film;
}

const Back = () => {
  history.back()
}

const gofilmsD1cinemas = () => {
  router.push(route.path + "/cinemas")
}

</script>